<template>
	<div class="hangkong">
		<LoadingComponent v-slot="{ loadingFlag }" class="hangkong_banner">
			<img :src="'http://www.shxw114.com:9527/' + banner[0]?.category_nav"
				v-if="loadingFlag && banner[0]?.category_nav" />
		</LoadingComponent>
		<div class="to">
			<Tz :data="[
          {
            id: 0,
            path: '/HomeOne',
            title: '首页',
          },
        ]" />
			<div class="show">
				<div class="beijing">
					<span>院校展示</span>
				</div>
			</div>
			<div class="show-text">
				<LoadingComponent v-slot="{ loadingFlag }" class="show-text1" v-for="it in ModListDates"
					:key="it.product_id">
					<a href="" style="display: block">
						<img :src="'http://39.105.137.169:9527/' + it.product_logo" v-if="loadingFlag" />
						<h3>{{ it.product_name }}</h3>
						<p>
							<span>学校所在地：</span>
							{{ it.product_desc }}
						</p>
						<p>
							<span>专业设置：</span>
							{{ it.product_weight }}
						</p>
						<p>
							<span>学校优势：</span>
							{{ it.product_money }}
						</p>
					</a>
				</LoadingComponent>
			</div>
			<!-- 轮播图 -->
			<div class="lbt_banner">
				<div class="lbt_banner_img"></div>
				<div class="lbt_box">
					<swiper :modules="modules" navigation>
						<swiper-slide class="swiper-slide" v-for="it in ModeBiyeDatas" :key="it.by_id">
							<img :src=" 'http://www.shxw114.com:9527/' + it.by_logo" />
						</swiper-slide>
					</swiper>
				</div>
			</div>
			<div class="hangkong-age">
				<img src="/img/国际航空服务与管理_58.55801a09.jpg" class="hangkong-age-img" />
				<LoadingComponent v-slot="{ loadingFlag }" class="hangkong-age-list">
					<div class="hangkong-age-list-li" v-for="it in sxfwDates" :key="it.id" v-if="loadingFlag">
						 <router-link :to="it.href">
							<img :src="it.img" class="hangkong-age-list-li-img" />
						 	<p>{{ it.title }}</p>
						 	<img :src="it.url" class="hangkong-age-list-li-img2" />
						</router-link>
					</div>
				</LoadingComponent>
			</div>
		</div>
		<LoadingComponent v-slot="{ loadingFlag }" class="status_con">
			<img src="/img/报名条件.7c214866.jpg" v-if="loadingFlag" />
		</LoadingComponent>
	</div>
</template>
<script setup>
	import {
		ModMayjorGet,
		ModListGet,
		ModBiyeGet
	} from "../../server/index.js";
	import Tz from "../../components/Tz/index.vue";
	import {  axiosFun } from "../../axios/index.js";
	import {
		Navigation,
		Pagination,
		Scrollbar,
		A11y
	} from 'swiper';
	import {
		Swiper,
		SwiperSlide
	} from 'swiper/vue';
	import {
		ref,
		onMounted
	} from "vue";
	const axios_ = async (v) => {
		const {
			data
		} = await v();
		return data;
	};
	const banner = ref({});
	const ModeBiyeDatas = ref({});
	const ModListDates = ref({});
	const sxfwDates = ref({});
	const modules = [Navigation, Pagination, Scrollbar, A11y];
	(async (v) => {
		banner.value = await axios_(ModMayjorGet);
		const {
			list
		} = await axios_(ModListGet);
		ModListDates.value = list; {
			const list = await axios_(ModBiyeGet);
			ModeBiyeDatas.value = list;
		}
		{
			const { data } = await axiosFun().post("/JSON/sxfw.json");
			sxfwDates.value = data;
		}
	})();
</script>
<style scoped>
	.hangkong {
		width: 100%;
		height: auto;
	}

	.hangkong_banner {
		width: 100%;
		height: 8rem;
	}

	.hangkong_banner img {
		width: 100%;
		height: 100%;
	}

	.lbt_banner {
		width: 100%;
		height: 15rem;
		margin-top: 0.4rem;
	}

	.lbt_banner_img {
		width: 100%;
		height: 2rem;
		background-image: url("/img/国际航空服务与管理_40.b08b16e9.jpg");
		background-size: 100% 100%;
	}

	.lbt_box {
		width: 100%;
		height: auto;
		margin-top: 0.4rem;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper .swiper-slide {
		width: 14.5rem !important;
		height: 10rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
	}

	.swiper .swiper-slide img {
		width: 100%;
		height: 100%;
	}
	.hangkong-age {
		width: 100%;
		height: auto; 
	}
	.hangkong-age-img {
		width: 100%;
		height: 2rem;
	}
	.hangkong-age-list {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
    	flex-wrap: wrap;
		padding: 0 1.6rem;
		box-sizing: border-box; 
		margin-top: 0.4rem;
	}
	.hangkong-age-list-li {
		width: 5rem;
		height: 8rem;
	}
	.hangkong-age-list-li .hangkong-age-list-li-img {
		width: 100%;
		height: 4rem;
	}
	.hangkong-age-list-li p {
		width: 100%;
		font-size: 0.5rem;
		line-height: 0.8rem;
		margin: 0.2rem 0;
		text-align: center;
		color: #3c9;
	}
	.hangkong-age-list-li .hangkong-age-list-li-img2 {
		width: 100%;
		height: 1rem; 
	}
</style>
<style>
	
	.swiper-button-next:after {
		width: 1.2rem;
		height: 1.2rem;
		display: block;
		background-image: url("/img/next.png");
		background-size: 100% 100%;
		content: "";
	}
	.swiper-button-prev:after {
		width: 1.2rem;
		content: ""; 
		height: 1.2rem;
		display: block;
		background-image: url("/img/prev.png");
		background-size: 100% 100%;
	}
</style>
